<template>
  <div style="margin: 10px">
    <!--搜索区域-->
    <div style="padding: 10px;background-color:#ffffff">
      <el-select v-model="searchForm.projectId" style="margin-right: 6px" filterable clearable placeholder="请选择项目" value-key="name">
          <el-option v-for="item in projects" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <a-button type="primary" icon="el-icon-search" @click="loadData()">查询</a-button>
    </div>
    <div style="margin-top: 10px;background-color:#ffffff">
      <div style="padding: 10px">
        <a-button :disabled="table.selected.length > 0?false:true" type="danger" @click="deleteConsideration()">删除</a-button>
      </div>
      <div style="padding: 10px">
        <a-table
          size="small"
          bordered
          :rowKey="record => record.id"
          :loading="table.loading"
          :data-source="table.dataSource"
          :pagination="table.pagination"
          :scroll="{ x: 1300 }"
          :row-selection="{ selectedRowKeys: table.selected, onChange: selectionChange, selections: [{
              key: 'all-data',
              text: '全选',
              onSelect: () => {
                this.table.selected = table.dataSource.map(item=>{return item.id});
              },
          }]}"
        >
          <a-table-column align='center' title="项目名" key="proName" data-index="proName" />
          <a-table-column align='center' title="项目负责人" key="proPerson" data-index="proPerson" />
          <a-table-column align='center' title="项目附件">
            <template slot-scope="t, r">
              <a-button @click="findProFiles(r.proId)">附件</a-button>
            </template>
          </a-table-column>
          <a-table-column align='center' title="分类" key="type" data-index="type" />
          <a-table-column align='center' title="送审时间" key="sendTime" data-index="sendTime">
            <template slot-scope="t">{{dateTimeFormat(t)}}</template>
          </a-table-column>
          <a-table-column align='center' title="意见(技术)">
            <template slot-scope="t, r">
              <a-tooltip :title="r.engineeringReview + '--' +dateTimeFormat(r.engineeringTime)">
                <div v-if="r.engineeringStatus == null" style="color: #9D9D9D">{{"无需审核"}}</div>
                <div v-else-if="r.engineeringStatus == 0" style="color: #EAC100">{{"待审核"}}</div>
                <div v-else-if="r.engineeringStatus == 1" style="color: #02F78E">{{r.engineeringRemark == null ? '通过': r.engineeringRemark}}</div>
                <div v-else-if="r.engineeringStatus == 2" style="color: #FF0000">{{r.engineeringRemark == null ? '不通过': r.engineeringRemark}}</div>
                <div v-else-if="r.engineeringStatus == 3" style="color: #804040">{{r.engineeringRemark == null ? '否决': r.engineeringRemark}}</div>
              </a-tooltip>
            </template>
          </a-table-column>
          <a-table-column align='center' title="意见(其他)">
            <template slot-scope="t, r">
              <a-tooltip :title="r.businessReview + '--' +dateTimeFormat(r.businessTime)">
                <div v-if="r.businessStatus == null" style="color: #9D9D9D">{{"无需审核"}}</div>
                <div v-else-if="r.businessStatus == 0" style="color: #EAC100">{{"待审核"}}</div>
                <div v-else-if="r.businessStatus == 1" style="color: #02F78E">{{r.businessRemark == null ? '通过': r.businessRemark}}</div>
                <div v-else-if="r.businessStatus == 2" style="color: #FF0000">{{r.businessRemark == null ? '不通过': r.businessRemark}}</div>
                <div v-else-if="r.businessStatus == 3" style="color: #804040">{{r.businessRemark == null ? '否决': r.businessRemark}}</div>
              </a-tooltip>
            </template>
          </a-table-column>
          <a-table-column align='center' title="招标负责人" key="biddingPerson" data-index="biddingPerson" />
          <a-table-column align='center' title="意见(终审)">
            <template slot-scope="t, r">
              <a-tooltip :title="r.finallyReview + '--' +dateTimeFormat(r.finallyTime)">
                <div v-if="r.finallyStatus == null" style="color: #9D9D9D">{{"无需审核"}}</div>
                <div v-else-if="r.finallyStatus == 0" style="color: #EAC100">{{"待审核"}}</div>
                <div v-else-if="r.finallyStatus == 1" style="color: #02F78E">{{r.finallyRemark == null ? '通过': r.finallyRemark}}</div>
                <div v-else-if="r.finallyStatus == 2" style="color: #FF0000">{{r.finallyRemark == null ? '不通过': r.finallyRemark}}</div>
                <div v-else-if="r.finallyStatus == 3" style="color: #804040">{{r.finallyRemark == null ? '否决': r.finallyRemark}}</div>
              </a-tooltip>
            </template>
          </a-table-column>
          <a-table-column align='center' title="定稿"/>
          <a-table-column title="操作" align="center" :width="100" fixed="right">
            <template slot-scope="text,scope">
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="setMessage(scope)">设置</el-button>
            </template>
        </a-table-column>
        </a-table>
      </div>
    </div>


    <!--上传文件模态框-->
    <el-dialog v-el-drag-dialog :visible.sync="proFiles.visible" title="上传项目附件">
      <el-form status-icon :model="proFiles.form" :rules="rules">
        <div>
          <a-divider orientation="left">工作联系函:</a-divider>
          <div>
            <div v-for="file in proFiles.contactFileList" :key="file.id" style="display:inline;">
              <template>
                <el-tag effect="plain" type="primary">
                  <a :href="file.url">{{"V-" + file.version + "版本"}}</a>
                </el-tag>
                <i class="el-icon-right"></i>
              </template>
            </div>
          </div>
          <div style="float:right">
            <el-upload
              class="upload-demo"
              action="string"
              :http-request="uploadFile"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="10">
              <a-button size="small" type="primary" @click="clickUpload(1)">点击上传</a-button>
            </el-upload>
          </div>
          <a-divider orientation="left">技术规格书:</a-divider>
          <div>
            <div v-for="file in proFiles.technicalFileList" :key="file.id" style="display:inline;">
              <template>
                <el-tag effect="plain" type="primary">
                  <a :href="file.url">{{"V-" + file.version + "版本"}}</a>
                </el-tag>
                <i class="el-icon-right"></i>
              </template>
            </div>
          </div>
          <div style="float:right">
            <el-upload
              class="upload-demo"
              action="string"
              :http-request="uploadFile"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="10"
              :file-list="uploadFileList.contact">
              <a-button size="small" type="primary" @click="clickUpload(2)">点击上传</a-button>
            </el-upload>
          </div>
          <a-divider orientation="left">其他:</a-divider>
          <div>
            <div v-for="file in proFiles.otherFileList" :key="file.id" style="display:inline;">
              <template>
                <el-tag effect="plain" type="primary">
                  <a :href="file.url">{{"V-" + file.version + "版本"}}</a>
                </el-tag>
                <i class="el-icon-right"></i>
              </template>
            </div>
          </div>
          <div style="float:right">
            <el-upload
              class="upload-demo"
              action="string"
              :http-request="uploadFile"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="10"
              :file-list="uploadFileList.contact">
              <a-button size="small" type="primary" @click="clickUpload(3)">点击上传</a-button>
            </el-upload>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
      </div>
    </el-dialog>

    <!--选择审核人-->
    <el-dialog v-el-drag-dialog :visible.sync="selectAuditor.visible" title="选择审核人">
      <el-form>
        <el-form-item label="部门审核(技术)"  label-width="120px" size="small" prop="engineeringReview">
          <el-select v-model="selectAuditor.form.engineeringReview" style="margin-left: 6px" filterable clearable placeholder="请选择审核人" value-key="engineeringReview">
            <el-option v-for="item in selectAuditor.user" :key="item.id" :label="item.nikeName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门审核(经营)"  label-width="120px" size="small" prop="businessReview">
          <el-select v-model="selectAuditor.form.businessReview" style="margin-left: 6px" filterable clearable placeholder="请选择审核人" value-key="businessReview">
            <el-option v-for="item in selectAuditor.user" :key="item.id" :label="item.nikeName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="终审"  label-width="120px" size="small" prop="finallyReview">
          <el-select v-model="selectAuditor.form.finallyReview" style="margin-left: 6px" filterable clearable placeholder="请选择审核人" value-key="finallyReview">
            <el-option v-for="item in selectAuditor.user" :key="item.id" :label="item.nikeName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="招标负责人"  label-width="120px" size="small" prop="biddingPerson">
          <el-select v-model="selectAuditor.form.biddingPerson" style="margin-left: 6px" filterable clearable placeholder="请选择招标负责人" value-key="biddingPerson">
            <el-option v-for="item in selectAuditor.user" :key="item.id" :label="item.nikeName" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="selectAuditor.submitLoading" size="small" @click="commitSelectAuditor()">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script>

import { getAction, postActionByQueryString, postActionByJson } from "@/api/manage"
import elDragDialog from '@/directive/el-drag-dialog'
import CommonUpload from '@/components/Upload/CommonUpload'
import { getToken } from '@/utils/auth'
import { dateTimeFormat } from '@/utils/format'

export default ({
    components: {
      CommonUpload
    },
    directives: { elDragDialog },

    data() {
      const fileUploadUrl = process.env.VUE_APP_BASE_API + 'file/uploadCache'


      return {
        selectAuditor: {
          visible: false,
          form: {
            engineeringReview: '',
            businessReview: '',
            biddingPerson: ''
          },
          user: [], //所有用户
          submitLoading: false
        },
        proId: '',
        fileType: '',
        uploadFileList: {
          contact: [],
          technical: [],
          other: []
        }, //上传文件
        headers: {
          "X-Token": getToken(),
          'Content-Type': 'multipart/form-data'
        },
        fileUploadUrl,
        proFiles: {
          visible: false,
          loading: false,
          contactFileList: [], //工作联系函
          technicalFileList: [], //规格书
          otherFileList: [] //其他
        },
        fileList:[],
        addDialog: {
          visible: false,
          form: {},
          loading: false
        },
        searchForm: {
          projectId: '' 
        },
        projects: [],
        table: {
          selected: [], //选中
          dataSource: [],
          loading: false,
          pagination: {
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '50'],
            current: 1,
            pageSize: 10,
            total: 0,
            onChange: (item) => {
                this.table.pagination.current = item
            },
            showTotal: (total, range) => {
                return range[0] + "-" + range[1] + " 共" + total + "条"
            },
            onShowSizeChange: (current, pageSize) => {
                this.table.pagination.pageSize = pageSize
            },
          },
        },
        rules: {
          
        },
        url: {
          //fileUpload: fileUploadUrl,
          uploadFile: 'bidding/file/uploadFile',
          findConsideration: '/bidding/consideration/findConsideration',
          findConsiderationPro: '/project/detail/findConsiderationPro',
          loadFiles: '/bidding/file/loadFiles',
          findAll: '/user/findAll',
          setMessage: '/bidding/consideration/setMessage'
        },
      }
    },
    created() {
      this.loadProjects()
      this.loadData()
    },
    methods: {
      dateTimeFormat,
      setMessage(scope){
        console.info(scope)
        this.proId = scope.id
        this.loadUsers()
        this.selectAuditor.form = scope
        this.selectAuditor.visible = true
      },
      commitSelectAuditor(){
        this.selectAuditor.submitLoading = true
        this.selectAuditor.form.id = this.proId
        postActionByQueryString(this.url.setMessage, this.selectAuditor.form)
        .then(resp=>{
          if(resp.status == 200){
            this.$message.success('提交成功')
          }else{
            this.$message.error('提交失败')
          }
        }).catch((e)=>{

        }).finally(()=>{
          this.selectAuditor.submitLoading = false
          this.selectAuditor.visible = false
        })
      },
      loadUsers(){
        getAction(this.url.findAll)
        .then(resp=>{
          this.selectAuditor.user = resp.data
        })
      },
      clickUpload(type){
        this.fileType = type
      },
      uploadFile(params){
        const file = params.file
        var form = new FormData()
        form.append("file", file)
        form.append("type", this.fileType)
        form.append("proId", this.proId)
        this.uploadFileRequest(this.headers, this.url.uploadFile, form)
        .then(resp=>{
          if(resp.status == 200){
            this.$message.success('上传成功')
            this.loadFiles()
          }else{
            this.$message.error('上传失败')
          }
        })
      },
      async loadFiles(){
        await getAction(this.url.loadFiles, {proId: this.proId})
        .then(resp =>{
          this.proFiles.contactFileList = resp.data["1"]
          this.proFiles.technicalFileList = resp.data["2"]
          this.proFiles.otherFileList = resp.data["3"]
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      async findProFiles(proId){
        this.proId = proId
        await this.loadFiles()
        this.proFiles.visible = true
      },
      deleteConsideration(){

      },
      rowClick(row, index) {
        return {
          on: {
            click: () => {
              let index = this.table.selected.indexOf(row.id)
              if(index === -1){
                this.table.selected.push(row.id)
              }else{
                this.table.selected.splice(index, 1)
              }
            }
          }
        }
      },
      selectionChange(record){
        const selectedId = []
        record.map(item => {
          selectedId.push(item)
        })
        this.table.selected = selectedId
      },
      saveRecordHandler(form) {
        this.$refs[form].validate((valid) => {
          if(valid){
          }
        })
      },
      addProConsideration(){
        this.addDialog.visible = true
      },
      loadProjects() {
        getAction(this.url.findConsiderationPro).then(resp => {
            this.projects = resp.data
        })
      },
      loadData(){
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10
        this.toSearch()
      },
      toSearch() {
        this.table.loading = true
        getAction(this.url.findConsideration, {
          proId: this.searchForm.projectId,
          current: this.table.pagination.current,
          pageSize: this.table.pagination.pageSize
        })
        .then(resp =>{
          this.table.dataSource = resp.data.records
          this.table.pagination.pageSize = resp.data.size
          this.table.pagination.current = resp.data.current
          this.table.pagination.total = resp.data.total
        }).catch((e)=>{

        }).finally(()=>{
          this.table.loading = false
        })
      },
    }
})



</script>

<style lang="scss" scoped>



</style>